<!--
 * @Author: your name
 * @Date: 2020-08-02 13:02:56
 * @LastEditTime: 2020-08-03 10:33:40
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \democ:\Users\12768\Desktop\g6-train-0\oneDay\oneDay.html
--> 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="container"></div>
  <!-- <script src="./oneDay.js"></script> -->
  <!-- /* 引入 G6 */ -->
  <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.1.0/build/g6.js"></script>
  <script>
     console.log(G6.Global.version);
  //定义数据源
const data = {
  //点集
  nodes: [
    {
      id: "node1",
      label: "Circle1",
      x: 150,
      y: 150
    },
    {
      //第二个图形的位置
      id: "node2",
      label: "Circle2",
      x: 300,
      y: 250
    }
  ],
  //边集
  edges: [
    //从第一条ode1连接到第二条node2的边
    {
      source: 'node1', // 起始点 id
        target: 'node2', // 目标点 id
        label: '我是连线', // 边的文本
    }
  ]
};
//创建G6图实例
const graph = new G6.Graph({
  container: "container", //指定挂载容器容器id
  //画布大小(宽高)
  width: 500,
  height: 500,
  defaultNode: {
    shape: "circle",
    size: [100], //圆形大小
    //边间距颜色
    color: "green",
    style: {
      //圆圈内背景颜色和边距
      fill: "blanck",
      lineWidth: 10
    },
    labelCfg: {
      //圆圈内字体颜色和大小
      style: {
        fill: "yellow",
        fontSize: 20
      }
    }
  },
  defaultEdge: {
    //连接的线条颜色
    style: {
      stroke: "red"
    }
  },
  // 交互模式
  modes: {
    default: [
    'drag-node' // 拖拽节点
    ]
  },
  //添加节点的点击颜色
  nodeStateStyles: {
       myStateName: {
         stroke: 'green',
         lineWidth: 3,
         cursor: 'pointer', //更改鼠标样式
      }
   },
});
  graph.on('node:mousedown', e => {
      graph.setItemState(e.item, 'myStateName', true);
  })
//读取数据
graph.data(data);
//渲染图
graph.render();

// // //创建G6图实例
// const graph = new  G6.Graph({
//   container:'container',
//   width:1000,
//   height:600,
//   fitView:true,
//   fitViewPadding:[20,40,50,20],
// })
// // 定义数据源
// const main = async()=>{
//   const response = await fetch(
//     'https://gw.alipayobjects.com/os/basement_prod/6cae02ab-4c29-44b2-b1fd-4005688febcb.json',
//   );
//   const remoteData = await response.json();
//   graph.data(remoteData);
//   graph.render();
// }
// main()
  </script>
</body>
</html>